<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <p>
      For a guide and recipes on how to configure / customize this project,
      <br />check out the
      <a
        href="https://cli.vuejs.org"
        target="_blank"
        rel="noopener"
      >vue-cli documentation</a>.
    </p>
    <h3>Installed Modules</h3>
    <div class="module_logos_box">
      <div class="module_logo_box">
        <a href="http://www.axios-js.com">
          <img
            <%-options.modules.includes('vue-axios')?'':'style="filter: opacity(0.2) grayscale();"'%>
            src="../assets/helloworld/axios.png"
            alt="axios"
            class="module_logo"
          />
        </a>
      </div>
      <div class="module_logo_box">
        <a href="https://element.eleme.cn">
          <img
            <%-options.modules.includes('element-ui')?'':'style="filter: opacity(0.2) grayscale();"'%>
            src=""
            alt="element-logo"
            class="nav-logo"
          />
        </a>
      </div>
      <div class="module_logo_box">
        <a href="https://awesome-vue.js.org">
          <img <%-options.modules.includes('vue-awesome')?'':'style="filter: opacity(0.2) grayscale();"'%> src="../assets/helloworld/hero.png" alt="hero" class="module_logo" />
        </a>
      </div>
      <div class="module_logo_box">
        <a href="https://echarts.apache.org">
          <img
            <%-options.modules.includes('echarts')?'':'style="filter: opacity(0.2) grayscale();"'%>
            src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/logo.png?_v_=20200710_1"
            alt="echarts logo"
            class="module_logo"
          />
        </a>
      </div>
    </div>
    <h3>UI Layout</h3>
    <h4 name="layout_common">common</h4>
    <img style="width: 500px" src="../assets/helloworld/element-ui-official.jpg"/>
    <h4 name="layout_sidebar">sidebar</h4>
    <img style="width: 500px" src="../assets/helloworld/element-ui-sidebar.jpg"/>
    <h3>Theme Color</h3>
    <h4 name="theme_official">official</h4>
    <div class="colors_box">
      <div
        class="demo-color-box"
        style="background-color: rgb(64, 158, 255); background-position: initial initial; background-repeat: initial initial;"
      >
        Primary
        <div class="value">#409EFF</div>
        <div class="bg-color-sub">
          <div
            class="bg-success-sub-item"
            style="background-color: rgb(217, 236, 255); background-position: initial initial; background-repeat: initial initial;"
          ></div>
          <div
            class="bg-success-sub-item"
            style="background-color: rgb(236, 245, 255); background-position: initial initial; background-repeat: initial initial;"
          ></div>
        </div>
      </div>
      <div
        class="demo-color-box"
        style="background-color: rgb(103, 194, 58); background-position: initial initial; background-repeat: initial initial;"
      >
        Success
        <div class="value">#67C23A</div>
        <div class="bg-color-sub">
          <div
            class="bg-success-sub-item"
            style="background-color: rgb(225, 243, 216); background-position: initial initial; background-repeat: initial initial;"
          ></div>
          <div
            class="bg-success-sub-item"
            style="background-color: rgb(240, 249, 235); background-position: initial initial; background-repeat: initial initial;"
          ></div>
        </div>
      </div>
      <div
        class="demo-color-box"
        style="background-color: rgb(230, 162, 60); background-position: initial initial; background-repeat: initial initial;"
      >
        Warning
        <div class="value">#E6A23C</div>
        <div class="bg-color-sub">
          <div
            class="bg-success-sub-item"
            style="background-color: rgb(250, 236, 216); background-position: initial initial; background-repeat: initial initial;"
          ></div>
          <div
            class="bg-success-sub-item"
            style="background-color: rgb(253, 246, 236); background-position: initial initial; background-repeat: initial initial;"
          ></div>
        </div>
      </div>
      <div
        class="demo-color-box"
        style="background-color: rgb(245, 108, 108); background-position: initial initial; background-repeat: initial initial;"
      >
        Danger
        <div class="value">#F56C6C</div>
        <div class="bg-color-sub">
          <div
            class="bg-success-sub-item"
            style="background-color: rgb(253, 226, 226); background-position: initial initial; background-repeat: initial initial;"
          ></div>
          <div
            class="bg-success-sub-item"
            style="background-color: rgb(254, 240, 240); background-position: initial initial; background-repeat: initial initial;"
          ></div>
        </div>
      </div>
      <div
        class="demo-color-box"
        style="background-color: rgb(144, 147, 153); background-position: initial initial; background-repeat: initial initial;"
      >
        Info
        <div class="value">#909399</div>
        <div class="bg-color-sub">
          <div
            class="bg-success-sub-item"
            style="background-color: rgb(233, 233, 235); background-position: initial initial; background-repeat: initial initial;"
          ></div>
          <div
            class="bg-success-sub-item"
            style="background-color: rgb(244, 244, 245); background-position: initial initial; background-repeat: initial initial;"
          ></div>
        </div>
      </div>
    </div>
    <h4 name="theme_adobe">adobe</h4>
    <div class="colors_box">
      <div
        class="demo-color-box"
        style="background-color: rgb(84, 168, 248); background-position: initial initial; background-repeat: initial initial;"
      >
        Primary
        <div class="value">#54A8F8</div>
        <div class="bg-color-sub">
          <div
            class="bg-success-sub-item"
            style="background-color: rgb(221, 238, 254); background-position: initial initial; background-repeat: initial initial;"
          ></div>
          <div
            class="bg-success-sub-item"
            style="background-color: rgb(238, 246, 254); background-position: initial initial; background-repeat: initial initial;"
          ></div>
        </div>
      </div>
      <div
        class="demo-color-box"
        style="background-color: rgb(171, 228, 93); background-position: initial initial; background-repeat: initial initial;"
      >
        Success
        <div class="value">#ABE45D</div>
        <div class="bg-color-sub">
          <div
            class="bg-success-sub-item"
            style="background-color: rgb(238, 250, 223); background-position: initial initial; background-repeat: initial initial;"
          ></div>
          <div
            class="bg-success-sub-item"
            style="background-color: rgb(247, 252, 239); background-position: initial initial; background-repeat: initial initial;"
          ></div>
        </div>
      </div>
      <div
        class="demo-color-box"
        style="background-color: rgb(242, 158, 57); background-position: initial initial; background-repeat: initial initial;"
      >
        Warning
        <div class="value">#F29E39</div>
        <div class="bg-color-sub">
          <div
            class="bg-success-sub-item"
            style="background-color: rgb(252, 236, 215); background-position: initial initial; background-repeat: initial initial;"
          ></div>
          <div
            class="bg-success-sub-item"
            style="background-color: rgb(254, 245, 235); background-position: initial initial; background-repeat: initial initial;"
          ></div>
        </div>
      </div>
      <div
        class="demo-color-box"
        style="background-color: rgb(235, 73, 105); background-position: initial initial; background-repeat: initial initial;"
      >
        Danger
        <div class="value">#EB4969</div>
        <div class="bg-color-sub">
          <div
            class="bg-success-sub-item"
            style="background-color: rgb(251, 219, 225); background-position: initial initial; background-repeat: initial initial;"
          ></div>
          <div
            class="bg-success-sub-item"
            style="background-color: rgb(253, 237, 240); background-position: initial initial; background-repeat: initial initial;"
          ></div>
        </div>
      </div>
      <div
        class="demo-color-box"
        style="background-color: rgb(209, 209, 209); background-position: initial initial; background-repeat: initial initial;"
      >
        Info
        <div class="value">#D1D1D1</div>
        <div class="bg-color-sub">
          <div
            class="bg-success-sub-item"
            style="background-color: rgb(246, 246, 246); background-position: initial initial; background-repeat: initial initial;"
          ></div>
          <div
            class="bg-success-sub-item"
            style="background-color: rgb(250, 250, 250); background-position: initial initial; background-repeat: initial initial;"
          ></div>
        </div>
      </div>
    </div>
    <h4 name="theme_clrs">clrs</h4>
    <div class="colors_box">
      <div
        class="demo-color-box"
        style="background-color: rgb(0, 116, 217); background-position: initial initial; background-repeat: initial initial;"
      >
        Primary
        <div class="value">#0074D9</div>
        <div class="bg-color-sub">
          <div
            class="bg-success-sub-item"
            style="background-color: rgb(204, 227, 247); background-position: initial initial; background-repeat: initial initial;"
          ></div>
          <div
            class="bg-success-sub-item"
            style="background-color: rgb(230, 241, 251); background-position: initial initial; background-repeat: initial initial;"
          ></div>
        </div>
      </div>
      <div
        class="demo-color-box"
        style="background-color: rgb(61, 153, 112); background-position: initial initial; background-repeat: initial initial;"
      >
        Success
        <div class="value">#3D9970</div>
        <div class="bg-color-sub">
          <div
            class="bg-success-sub-item"
            style="background-color: rgb(216, 235, 226); background-position: initial initial; background-repeat: initial initial;"
          ></div>
          <div
            class="bg-success-sub-item"
            style="background-color: rgb(236, 245, 241); background-position: initial initial; background-repeat: initial initial;"
          ></div>
        </div>
      </div>
      <div
        class="demo-color-box"
        style="background-color: rgb(255, 133, 27); background-position: initial initial; background-repeat: initial initial;"
      >
        Warning
        <div class="value">#FF851B</div>
        <div class="bg-color-sub">
          <div
            class="bg-success-sub-item"
            style="background-color: rgb(255, 231, 209); background-position: initial initial; background-repeat: initial initial;"
          ></div>
          <div
            class="bg-success-sub-item"
            style="background-color: rgb(255, 243, 232); background-position: initial initial; background-repeat: initial initial;"
          ></div>
        </div>
      </div>
      <div
        class="demo-color-box"
        style="background-color: rgb(255, 65, 54); background-position: initial initial; background-repeat: initial initial;"
      >
        Danger
        <div class="value">#FF4136</div>
        <div class="bg-color-sub">
          <div
            class="bg-success-sub-item"
            style="background-color: rgb(255, 217, 215); background-position: initial initial; background-repeat: initial initial;"
          ></div>
          <div
            class="bg-success-sub-item"
            style="background-color: rgb(255, 236, 235); background-position: initial initial; background-repeat: initial initial;"
          ></div>
        </div>
      </div>
      <div
        class="demo-color-box"
        style="background-color: rgb(170, 170, 170); background-position: initial initial; background-repeat: initial initial;"
      >
        Info
        <div class="value">#AAAAAA</div>
        <div class="bg-color-sub">
          <div
            class="bg-success-sub-item"
            style="background-color: rgb(238, 238, 238); background-position: initial initial; background-repeat: initial initial;"
          ></div>
          <div
            class="bg-success-sub-item"
            style="background-color: rgb(247, 247, 247); background-position: initial initial; background-repeat: initial initial;"
          ></div>
        </div>
      </div>
    </div>
    <h4 name="theme_fall">fall</h4>
    <div class="colors_box">
      <div class="demo-color-box" style="background-color: rgb(255, 127, 80); background-position: initial initial; background-repeat: initial initial;">
        Primary
        <div class="value">#FF7F50</div>
        <div class="bg-color-sub">
          <div class="bg-success-sub-item" style="background-color: rgb(255, 229, 220); background-position: initial initial; background-repeat: initial initial;"></div>
          <div class="bg-success-sub-item" style="background-color: rgb(255, 242, 238); background-position: initial initial; background-repeat: initial initial;"></div>
        </div>
      </div>
      <div class="demo-color-box" style="background-color: rgb(85, 183, 95); background-position: initial initial; background-repeat: initial initial;">
        Success
        <div class="value">#55B75F</div>
        <div class="bg-color-sub">
          <div class="bg-success-sub-item" style="background-color: rgb(221, 241, 223); background-position: initial initial; background-repeat: initial initial;"></div>
          <div class="bg-success-sub-item" style="background-color: rgb(238, 248, 239); background-position: initial initial; background-repeat: initial initial;"></div>
        </div>
      </div>
      <div class="demo-color-box" style="background-color: rgb(235, 205, 87); background-position: initial initial; background-repeat: initial initial;">
        Warning
        <div class="value">#EBCD57</div>
        <div class="bg-color-sub">
          <div class="bg-success-sub-item" style="background-color: rgb(251, 245, 221); background-position: initial initial; background-repeat: initial initial;"></div>
          <div class="bg-success-sub-item" style="background-color: rgb(253, 250, 238); background-position: initial initial; background-repeat: initial initial;"></div>
        </div>
      </div>
      <div class="demo-color-box" style="background-color: rgb(238, 71, 71); background-position: initial initial; background-repeat: initial initial;">
        Danger
        <div class="value">#EE4747</div>
        <div class="bg-color-sub">
          <div class="bg-success-sub-item" style="background-color: rgb(252, 218, 218); background-position: initial initial; background-repeat: initial initial;"></div>
          <div class="bg-success-sub-item" style="background-color: rgb(253, 237, 237); background-position: initial initial; background-repeat: initial initial;"></div>
        </div>
      </div>
      <div class="demo-color-box" style="background-color: rgb(200, 200, 200); background-position: initial initial; background-repeat: initial initial;">
        Info
        <div class="value">#C8C8C8</div>
        <div class="bg-color-sub">
          <div class="bg-success-sub-item" style="background-color: rgb(244, 244, 244); background-position: initial initial; background-repeat: initial initial;"></div>
          <div class="bg-success-sub-item" style="background-color: rgb(250, 250, 250); background-position: initial initial; background-repeat: initial initial;"></div>
        </div>
      </div>
    </div>
    <h3>Installed CLI Plugins</h3>
    <ul>
      <li>
        <a
          href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel"
          target="_blank"
          rel="noopener"
        >babel</a>
      </li>
      <li>
        <a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a>
      </li>
      <li>
        <a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a>
      </li>
    </ul>
    <h3>Essential Links</h3>
    <ul>
      <li>
        <a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a>
      </li>
      <li>
        <a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a>
      </li>
      <li>
        <a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a>
      </li>
      <li>
        <a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a>
      </li>
      <li>
        <a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a>
      </li>
    </ul>
    <h3>Ecosystem</h3>
    <ul>
      <li>
        <a
          href="https://github.com/vuejs/vue-devtools#vue-devtools"
          target="_blank"
          rel="noopener"
        >vue-devtools</a>
      </li>
      <li>
        <a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a>
      </li>
      <li>
        <a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
.module_logos_box {
  display: flex;
  align-items: center;
  width: 800px;
  margin: 0 auto;
}
.module_logo_box {
  width: 25%;
}
img.module_logo {
  height: 120px;
  max-width: 100%;
  object-fit: contain;
}

.colors_box {
  display: flex;
  width: 700px;
  margin: 0 auto;
  justify-content: space-between;
}
.colors_box .demo-color-box {
  min-width: calc(120px - 28px);
  padding: 14px;
  color: white;
  text-align: left;
  border-radius: 5px;
}
.colors_box .demo-color-box .bg-color-sub {
  margin-bottom: -14px;
  margin-left: -14px;
  margin-right: -14px;
  display: flex;
}
.colors_box .demo-color-box .bg-color-sub div:first-child {
  width: 50%;
  height: 30px;
  border-bottom-left-radius: 5px;
}
.colors_box .demo-color-box .bg-color-sub div:last-child {
  width: 50%;
  height: 30px;
  border-bottom-right-radius: 5px;
}
</style>